import React from 'react';

class ScheduleBanner extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'ScheduleBanner';
        // liveVideoUrl 是否有直播的 btn
        this.state = {
            liveVideoUrl: props.button,
            data : props.data
        }
            // {
            //               club1: {
            //                   logo: "",
            //                   name: "东北第一",
            //                   score: "3"
            //               },
            //               club2: {
            //                   logo: "",
            //                   name: "沈阳大圣",
            //                   score: "2"
            //               },
            //               time: {
            //                   date: "2017年8月21日",
            //                   datetime: "07:00"
            //               },
            //               location: "西北体育场"
            //             }
            //         }
    }

    componentWillMount() {
        console.log("scheduleBanner Will Mount");
        console.log(this.props.data);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
          liveVideoUrl: nextProps.button,
          data: nextProps.data
        })
    }

    render() {
        let buttonShow = function( liveVideoUrl ) {
          console.log(this.props.button);
          console.log(this.state.liveVideoUrl);
          console.log(`button show? ${liveVideoUrl}`);
            return "true" == liveVideoUrl?<a>观看直播</a>:"";
        }.bind(this)
        return (
               <div className="banner scheduleBanner">
                  <div className="scheduleBannerBlock">
                      <div className="club">
                          <img className="clubLogo" src={this.state.data.club1.logo}/>
                          <p >
                              {this.state.data.club1.name}
                          </p>
                      </div>
                      <div className="vsInfo">
                          <span className="score">
                            {this.state.data.club1.score}-{this.state.data.club2.score}
                            </span>
                          <span>{this.state.data.time.date}&nbsp;{this.state.data.time.datetime}
                          </span>
                          <span>
                          <i  className="iconfont">&#xe606;</i>

                          {this.state.data.location}
                          </span>
                      </div>
                      <div className="club">
                          <img className="clubLogo" src={this.state.data.club2.logo}/>
                          <p>
                              {this.state.data.club2.name}
                          </p>
                      </div>
                  </div>
                  {buttonShow(this.state.liveVideoUrl)}
               </div>
           );
    }
}

export default ScheduleBanner;
